<template>
  <view class="order-closure-page page-content">
    <z-paging ref="paging" v-model="currentList" @query="queryList" :auto="false" :refresher-enabled="true"
      :loading-more-enabled="true" empty-view-text="暂无数据">
      <template #top>
        <up-navbar title="优惠券列表" :autoBack="false" :fixed="true" bgColor="transparent" :border="false" placeholder
          @leftClick="handleBackClick">
          <template>
            <view></view>
          </template>
        </up-navbar>

        <up-sticky class="padding-20" bgColor="transparent">
          <up-search v-model="searchValue" :clearabled="true" :showAction="false" placeholder="请输入手机号" @search="handleSearch" @clear="handleSearch('')"></up-search>
          <up-tabs :list="tabsList" :scrollable="false" @change="handleTabChange"></up-tabs>
        </up-sticky>
      </template>

      <view class="order-closure-list">
        <view class="list-item-card" v-for="(item, index) in currentList" :key="index">
          <view class="card-header">
            <view class="title">
              优惠券ID：<text class="number">{{ item.bizCode }}</text>
            </view>
            <view class="status">
              {{ getTypeText(item.type) }}
            </view>
          </view>
          <view class="card-content-box">
            <view class="content">
              <view class="item">
                <text class="label">
                  操作标题：
                </text>
                <text class="value">
                  {{ item.title }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  操作时间：
                </text>
                <text class="value">
                  {{ item.operTime }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  操作员：
                </text>
                <text class="value">
                  {{ item.oldUidName }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  优惠券编码：
                </text>
                <text class="value">
                  {{ item.couponCode }}
                </text>
              </view>
              <view class="item" v-if="item.orderNo">
                <text class="label">
                  订单号：
                </text>
                <text class="value">
                  {{ item.orderNo }}
                </text>
              </view>
              <view class="item" v-if="item.remark">
                <text class="label">
                  备注：
                </text>
                <text class="value">
                  {{ item.remark }}
                </text>
              </view>
              <view class="item">
                <text class="label">
                  用户账号：
                </text>
                <text class="value">
                  xswl
                </text>
              </view>
              <view class="item">
                <text class="label">
                  使用停车场：
                </text>
                <text class="value">
                  蘑菇停车场
                </text>
              </view>
              <view class="item">
                <text class="label">
                  优惠券面额：
                </text>
                <text class="value">
                  20
                </text>
              </view>
              <view class="item">
                <text class="label">
                  优惠规则：
                </text>
                <text class="value">
                  仅限本人
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { getCouponOperationList } from '@/api';

// 选项卡数据
const tabsList = [
  { name: "全部" },
  { name: "领取" },
  { name: "使用" },
  { name: "转增" },
  { name: "退回" },
  { name: "回收" },
];
const currentTab = ref(0);

// z-paging 组件引用
const paging = ref(null);

// 当前显示的列表数据
const currentList = ref([]);
const searchValue = ref('');

// 选项卡切换事件
const handleTabChange = (e) => {
  const newIndex = e.index;
  if (currentTab.value === newIndex) {
    return; // 如果是同一个tab，不需要重新加载
  }

  currentTab.value = newIndex;

  // 切换tab时重新加载数据
  if (paging.value) {
    paging.value.reload();
  }
};

// 处理返回点击事件
const handleBackClick = () => {
  uni.redirectTo({
    url: '/pages/home/index'
  })
}

// 获取业务类型文本
const getTypeText = (type) => {
  const typeMap = {
    '1': '优惠券业务流',
    '2': '领取',
    '3': '使用',
    '4': '转增',
    '5': '退回',
    '6': '回收'
  };
  return typeMap[type] || '未知类型';
};

// 获取列表数据
const queryList = async (pageNo, pageSize) => {
  try {
    const params = {
      pageNum: pageNo,
      pageSize: pageSize,
      type: currentTab.value === 0 ? '0' : String(currentTab.value),
      keyword: searchValue.value
    };
    
    const result = await getCouponOperationList(params);
    if (result.success) {
      paging.value.complete(result.data.records || []);
    } else {
      uni.showToast({
        title: result.msg || '获取数据失败',
        icon: 'none'
      });
      paging.value.complete(false);
    }
  } catch (error) {
    console.error('获取优惠券列表失败', error);
    paging.value.complete(false);
  }
};

// 搜索按钮点击事件
const handleSearch = (value) => {
  searchValue.value = value;
  if (paging.value) {
    paging.value.reload();
  }
};

// 页面挂载时初始化数据
onMounted(() => {
  if (paging.value) {
    paging.value.reload();
  }
});
</script>

<style scoped lang="scss">
.order-closure-list {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0rpx 20rpx 30rpx;

  &-item {
    display: flex;
    flex: 1;
    align-items: center;
    text-align: center;

    .item-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }

    .arrow-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .waiting-count {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    display: flex;
    align-items: center;

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #fe6000;
      margin-left: 10rpx;
    }
  }
}

/* 列表统计 */
.list-statistics {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
}

.list-statistics .item {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.list-statistics .label {
  font-size: 14px;
  color: #666;
}

.list-statistics .value {
  font-size: 18px;
  font-weight: bold;
  color: #e9710f;
}
</style>